今天來介紹一下語意化標籤！
雖然，接觸到許多tag，
可是最常用的還是div，
打怪練功，常常拿著div這一把劍從頭砍尾。
我常常寫成這樣：

<div class="container">
        <div class="row">
            <div class="col-sm-12 col-md-6 col-lg-4”
                <div class="my-2 text-center d-flex flex-column">
                    <a href="confirm.html"><img src="images/kfc-logo.svg" alt="KFC"></a>
                    <div>"輸入便當店"</div>
                    <div>"輸入種類"</div>
                    <div>
                        <div>營業時間：</div>
                        <div>"輸入營業時間"</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

這樣寫，全部都是<div>，幸好我的縮排還算清楚，如果連縮排都不清楚，
別人在判別上會分不出他們的階層，
但是html tag完全看不出語意，
讓人不容易知道這段在寫什麼。

<div class="container">
        <div class="row"
            <ul class="col-sm-12 col-md-6 col-lg-4"
                <li class="my-2 text-center d-flex flex-column">
                    <a href="confirm.html"><img src="images/kfc-logo.svg" alt="KFC"></a>
                    <span>"輸入便當店"</span>
                    <span>"輸入種類"</span>
                    <div>
                        <span>營業時間：</span>
                        <span>"輸入營業時間"</span>
                    </div>
                </li>
            </ul>
        </div>
    </div>

像上面這樣寫會比較好一點，

這部分其實我還在學習，
自己的語意化標籤還是寫的沒有很好，
常常被念XD
或者是div亂包，什麼東西外面都用div包起來，
ul>li結構外面也用div包起來，

常常被問：你外面為什麼在ul外要再包一層div呢？ul就是最外層了啊！
後來想想也是，都在亂包，什麼都要包。
一個功能的地方就包一次。

再來介紹一些語意化標籤

<header>
網頁的上方，常常拿來放LOGO、站名、導覽列、?等等。

<footer>
網頁的下方，常用來放法律資訊、超連結、聯絡資訊等等。

<hn>,n=1~6
這個是拿來當標題的，根據數字的大小，數字越大，顯示的字越小。
其中，一個網站中，h1不要太常用，通常一個就好。

<nav>
導覽列，導覽列常常出現在<header>，讓使用者可以迅速切換頁面。

<aside>
側欄，這個我也是這次鐵人才去查到的，我原本都用.sidebar來當側爛，
側欄可以放導覽，廣告等等非主要內容。

有了這些語意化標籤，
我們不需要只使用<div>來區隔各個elemnet，
並讓網頁設計在結構內容上更直觀，
即使沒有CSS，也能只靠html就能判讀出在寫什麼東西。